<template>
  <div class="list-item border-bottom">
    <div class="list-item-content">
      <span class="name">
      {{label}}
      </span>
      <slot>
        <span class="content">
          {{content}}
        </span>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    content: {
      type: [String, Number],
      default: ''
    },
    label: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="stylus" scoped>
 @import '~@/assets/styles/variables.styl'
  .list-item 
    display flex 
    height 36px 
    align-items center
    box-sizing border-box 
    padding 0 10px 
    .list-item-content  
      display flex
      .name 
        color $color-sub-grey
        width 85px
        text-align left 
      .content 
        color $color-theme-red
</style> 